<template>
	<el-menu :default-active="activeIndex" class="el-menu-person-side"
	@select="handleSelect"
	>
		<el-menu-item index="person/overview"
		:class="isActive('overview') ? 'is-active' : ''">
			<div class="flex items-center">
				<img src="/person/overview-active.svg" alt="" class="mr-10px" v-show="isActive('overview')">
				<img src="/person/overview.svg" alt="" class="mr-10px" 
				v-show="(!isActive('overview'))">
				<span>账户总览</span>
			</div>
		</el-menu-item>
		<el-sub-menu index="person/property"
		:class="isActive('person/property') ? 'is-active' : ''"
		>
			<template #title>
				<img src="/person/property-active.svg" alt="" class="mr-10px" v-show="isActive('person/property')">
				<img src="/person/property.svg" alt="" class="mr-10px" 
				v-show="(!isActive('property'))">
				<span>账户资产</span>
			</template>
			<el-menu-item index="proFund"
			:class="isActive('proFund') ? 'is-active' : ''">资金账户</el-menu-item>
			<el-menu-item index="proSpot"
			:class="isActive('proSpot') ? 'is-active' : ''">现货账户</el-menu-item>
			<el-menu-item index="proContract"
			:class="isActive('proContract') ? 'is-active' : ''">合约账户</el-menu-item>
			<el-menu-item index="proManage"
			:class="isActive('proManage') ? 'is-active' : ''">理财账户</el-menu-item>
		</el-sub-menu>
		<el-sub-menu index="person/record"
		:class="isActive('person/record') ? 'is-active' : ''"
		>
			<template #title>
				<img src="/person/record-active.svg" alt="" class="mr-10px" v-show="isActive('record')">
				<img src="/person/record.svg" alt="" class="mr-10px" 
				v-show="(!isActive('record'))">
				<span>订单记录</span>
			</template>
			<el-menu-item index="recC2c"
			:class="isActive('recC2c') ? 'is-active' : ''">c2c订单</el-menu-item>
			<el-menu-item index="recSpot"
			:class="isActive('recSpot') ? 'is-active' : ''">现货订单</el-menu-item>
			<el-menu-item index="recContract"
			:class="isActive('recContract') ? 'is-active' : ''">合约订单</el-menu-item>
			<el-menu-item index="recManage"
			:class="isActive('recManage') ? 'is-active' : ''">理财订单</el-menu-item>
			<el-menu-item index="recFlow"
			:class="isActive('recFlow') ? 'is-active' : ''">账户交易流水</el-menu-item>
		</el-sub-menu>
		<el-menu-item index="person/personSetting"
		:class="isActive('personSetting') ? 'is-active' : ''">
			<div class="flex items-center">
				<img src="/person/setting-active.svg" alt="" class="mr-10px" v-show="isActive('personSetting')">
				<img src="/person/setting.svg" alt="" class="mr-10px" 
				v-show="(!isActive('personSetting'))">
				<span>设置</span>
			</div>
		</el-menu-item>
	</el-menu>
</template>
<script lang="ts" setup>
import {useRoute,useRouter,onBeforeRouteUpdate } from 'vue-router';
import useJump from '@/utils/jump';
// 当前路由实例
const route = useRoute();
const {jumpTo} = useJump();

// 是否激活router
const activeIndex = ref<string>(route.path);
// 判断当前路由是否匹配
const isActive = (index:string)=>{
	if(route.path === '/'+index || route.path.includes('/'+index)){
		return true;
	}else{
		return false;
	}
}
// 点击导航事件
function handleSelect(key: string, keyPath: string[]) {
	console.log(route.path,keyPath);
	let path = '/' + keyPath.join('/')
	jumpTo(path)
};

// 监听路由变化
onBeforeRouteUpdate((to)=>{
	// console.log(to.path)
	activeIndex.value = to.path;
})
</script>
<style lang="scss">
.el-menu-person-side {
	border-right: 1px solid #ebeef500;

	.el-menu-item,
	.el-sub-menu,
	.el-sub-menu__title {
		font-size: 16px !important;
		color: #86909C;
	}
	.el-sub-menu.is-active .el-sub-menu__title{
		color: #000000;
	}
	.el-menu-item.is-active {
		color: #000000;
		position: relative;
		border-left: 4px solid #000000;
		z-index: 10;

		&::after {
			content: '';
			width: calc(100% - 6px);
			height: 100%;
			position: absolute;
			background-color: #F5F5F5;
			z-index: -1;
			border-radius: 10px;
			left: 6px;
		}
	}
}</style>
